<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax</title>
</head>
<body>
    <ul id="repos"></ul>
    <!-- <script type="module"> // type="module" 支持es6模块化 -->
    <script> // 不使用上述type="module"时需要搭配立即执行函数使用
        // // 前后端分离 js主动的请求接口（异步任务），拿到数据
        // // xhr 对象
        // // 早期接口请求的对象
        // const xhr = new XMLHttpRequest(); // 实例化
        // // http 请求  GET  打开一个数据传输的通道
        // // 底层 好理解 浏览器网络请求的通道被打开
        // xhr.open('GET', 'https://api.github.com/users/fogletter/repos');
        // xhr.send(); // 发送请求
        // // es6之前的 对象 连promise 都没有 不存在then
        // // 事件监听 回调函数
        // console.log(xhr.readyState);// 1
        // xhr.onreadystatechange = function() {
        //     // console.log(xhr.readyState);// 2 3 4
        //     if(xhr.readyState == 4){
        //         // 响应内容到达了
        //         // 后端数据接口的格式是XML html 也是XML 的一种格式
        //         // console.log(xhr.responseText);
        //         // 反序列化
        //         const data = JSON.parse(xhr.responseText);
        //         document.getElementById('repos').innerHTML = data.map(item => `<li>${item.name}</li>`).join('');
        //     }
        // }

    // 请使用promise 封装ajax 任务！
        // 共同点 http xhr 对象
        // 区别 url 参数
        const getJSON = async (url) => {
            return new Promise((resolve, reject) => {
                // executor 执行器
                // pending 状态
                const xhr = new XMLHttpRequest();
                xhr.open('GET', url);
                xhr.send();
                xhr.onreadystatechange = function() {
                    if(xhr.readyState == 4){
                        resolve(JSON.parse(xhr.responseText));
                    }
                }
            })
        }

        (async() => {
            const data = await getJSON('https://api.github.com/users/fogletter/repos');
            // fullfilled
            document.getElementById('repos').innerHTML = data.map(item => `<li>${item.name}</li>`).join('');
        })()
    </script>
</body>
</html>